<template>
  <el-menu
    router
    default-active="/user"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <div v-for="(item,index) in navigation" :key="index">
      <el-menu-item v-if="item.children===undefined" :index="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
      <el-submenu v-if="item.children!==undefined" :index="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item v-for="(sec,i) in item.children" :key="i" :index="sec.path">
          <i class="el-icon-menu"></i>
          <span slot="title">{{sec.name}}</span>
        </el-menu-item>
      </el-submenu>
    </div>
  </el-menu>
</template>

<script>
  export default {
    name: "PeskNavigation",
    data() {
      return {
        navigation: [
          {
            icon: 'el-icon-odometer', name: '系统状态', path: '/page/home'
          },
          {
            icon: 'el-icon-user', name: '用户管理', path: '/page/user',
            children: [
              {name: '创建特殊用户', path: '/page/user/add'},
              {name: '管理用户', path: '/page/user/manager'}
            ]
          },
          {
            icon: 'el-icon-s-custom', name: '管理员管理', path: '/page/admin',
            children: [
              {name: '创建管理员', path: '/page/admin/add'},
              {name: '管理Admin', path: '/page/admin/manager'}
            ]
          },
          {
            icon: 'el-icon-edit', name: '博文管理', path: '/page/blog',
            children: [
              {name: '官方发布', path: '/page/blog/add'},
              {name: '管理博文', path: '/page/blog/manager'}
            ]
          },
          {
            icon: 'el-icon-tickets', name: '帖子管理', path: '/page/post',
            children: [
              {name: '官方发布', path: '/page/post/add'},
              {name: '管理帖子', path: '/page/post/manager'}
            ]
          },
          {
            icon: 'el-icon-odometer', name: '系统维护', path: '/page/monitor',
            children: [
              {name: '日志中心', path: '/page/monitor/log'},
            ]
          },
          {
            icon: 'el-icon-timer', name: '任务管理', path: '/page/task',
            children: [
              {name: '添加任务', path: '/page/task/add'},
              {name: '管理任务', path: '/page/task/manager'}
            ]
          },
          {icon: 'el-icon-headset', name: '客服系统', path: '/page/customer'}
        ]
      }
    }
  }
</script>

<style scoped>

</style>
